<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>笔芯</title>
    <script src="js/jquery.min.js"></script>
    <style>
        img{
            margin-top: 500px;
        }
        #love{
            position: absolute;
            left: 50%;
            top: 200px;
        }
        #love1{
            display: none;
        }
        #love2{
            display: none;
        }
    </style>
</head>
<body>
    <img src="images/love.gif">
    <div id="love"></div>
    <span id="love1">
    <svg t="1638444059044" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2554" width="200" height="200"><path d="M689.11 121.72c-70.21 0-133.67 28.85-179.2 75.32-45.53-46.48-108.99-75.32-179.2-75.32-138.56 0-250.89 112.32-250.89 250.87 0 286.73 430.08 537.6 430.08 537.6S940 659.33 940 372.6c0-138.55-112.32-250.88-250.89-250.88z" fill="#EC87C0" p-id="2555"></path><path d="M689.11 121.72c-12.17 0-24.12 0.88-35.83 2.56 121.58 17.39 215.04 121.93 215.04 248.31 0 235.84-290.97 447.42-394.25 515.1 22.29 14.61 35.84 22.51 35.84 22.51S940 659.33 940 372.6c0-138.55-112.32-250.88-250.89-250.88z" fill="#FFFFFF" opacity=".2" p-id="2556"></path></svg>
    </span>
    <span id="love2">
    <svg t="1638444904250" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2698" width="200" height="200"><path d="M512 311.893333c-53.674667-53.674667-140.714667-53.674667-194.474667 0-68.010667 68.010667-68.010667 178.346667 0 246.357334l194.645334 194.218666 194.218666-194.218666c68.010667-68.010667 68.010667-178.346667 0-246.357334-34.816-34.816-83.541333-47.018667-128.170666-36.778666" fill="#64EDAC" p-id="2699"></path><path d="M825.344 190.293333c-58.538667-58.538667-141.653333-82.432-222.464-63.829333-18.346667 4.266667-29.866667 22.528-25.6 40.96 4.181333 18.346667 22.528 29.781333 40.96 25.6 57.685333-13.312 117.077333 3.754667 158.890667 45.568 87.722667 87.722667 87.722667 230.4 0 318.122667L512.341333 821.333333l-265.386666-264.704c-87.722667-87.722667-87.722667-230.4 0-318.122666 66.389333-66.389333 174.506667-66.389333 240.896 0l58.88 59.221333c6.741333 6.826667 66.048 65.194667 127.146666 65.194667 1.536 0 3.157333 0 4.693334-0.085334 25.770667-1.28 48.384-13.056 65.194666-33.962666a34.056533 34.056533 0 0 0-5.205333-47.957334 34.133333 34.133333 0 0 0-47.957333 5.205334c-5.717333 7.168-10.752 8.362667-15.36 8.533333-25.344 1.450667-64.768-29.696-79.957334-44.970667l-59.050666-59.477333v-0.085333c-93.013333-93.013333-244.394667-93.013333-337.493334 0-114.346667 114.346667-114.346667 300.288 0 414.634666l289.536 288.853334c6.656 6.656 15.36 9.984 24.149334 9.984 8.704 0 17.493333-3.328 24.149333-9.984l288.853333-288.853334c114.176-114.176 114.176-300.202667-0.085333-414.464z" fill="#333C4F" p-id="2700"></path><path d="M273.493333 425.386667c-18.858667 0-34.133333-15.274667-34.133333-34.133334 0-50.090667 14.336-88.661333 42.666667-114.773333 37.888-34.816 84.906667-32 90.112-31.573333 18.773333 1.536 32.768 18.090667 31.232 36.864A34.048 34.048 0 0 1 366.933333 313.002667c-1.109333 0-23.296-0.768-39.168 14.165333-13.397333 12.629333-20.138667 34.218667-20.138666 64.085333 0 18.773333-15.274667 34.133333-34.133334 34.133334z" fill="#333C4F" p-id="2701"></path></svg>
    </span>
</body>
<script>
    $(function(){
        
       setTimeout(() => {
           $("img").eq(0).attr("src","images/love.png");
       }, 9500); 
       setTimeout(() => {
        $("#love1").css("display","block")
       }, 10000);
       setTimeout(() => {
        $("#love2").css("display","block")
        love()
       }, 10500);
    })
    
    function love(){
        setTimeout(() => {
            for (var i = 0; i < 3; i++) {        //第一部分
            for (var j = 0; j <(3-i)*2-1 ; j++) {        //打印空格，第一个倒直角三角    5-3-1
                $("#love").append("&thinsp;&thinsp;&nbsp;");
            }
            for (var j = 0; j <(i+1)*4+2 ; j++) {        //打印*，第一个梯形    6-10-14
                $("#love").append("♥")
            }
            for (var j = 0; j < ((3-i)*2-1)*2-1; j++) {        //打印空格，倒等腰三角形    9-5-1
                $("#love").append("&thinsp;&thinsp;&nbsp;");
            }
            for (var j = 0; j <(i+1)*4+2 ; j++) {        //打印*，第二个梯形    6-10-14
                $("#love").append("♥")
            }
            $("#love").append("<br/>");       //外循环 执行一次 换行
        }
        }, 1000);
        setTimeout(() => {
            for (var i = 0; i < 3; i++) {        //第二部分，打印长方形
            for (var j = 0; j < 31; j++) {
                $("#love").append("♥")    
            }
            $("#love").append("<br/>");
        }
        }, 2000);
       setTimeout(() => {
        for (var i = 0; i < 8; i++) {        //第三部分，打印倒三角形
            for (var j = 0; j < i*2+1; j++) {
                $("#love").append("&thinsp;&thinsp;&nbsp;");
            }
            for (var j = 0; j < 4*(8-i)-3; j++) {
                $("#love").append("♥")
            }
            $("#love").append("<br/>");
        }
       }, 3000);
        
    }
</script>
</html>